import React, { Component } from 'react'

export default class AdvControlledCom extends Component {
  constructor(){
    super()
    this.state={
        username:'Giles',
        password:'123456',
        sex:0,
        provice:0
    }
  }
  handle=(e)=>{
    console.log('val',e.target.value);
    console.log('name',e.target.name);
    this.setState({
        [e.target.name]:e.target.value
    })
  }
  render() {
    const {username,password,sex}=this.state
    return (
      <div>
        <h2>用户注册</h2>
        <div>
            <label htmlFor="username">用户名:</label>
            <input type="text" value={username} onChange={this.handle} name="username"/>
        </div>
        <div>
            <label htmlFor="username">密码:</label>
            <input type="text" value={password} onChange={this.handle} name="password"/>
        </div>
        <div>
            <label htmlFor="provice">省份:</label>
            <select onChange={this.handle} name="provice">
                <option value="0">--请选择省份--</option>
                <option value="1">陕西省</option>
                <option value="2">四川省</option>
                <option value="3">湖北省</option>
            </select>
        </div>
        <div>
            <label htmlFor="usersex">性别</label>
            <input type='radio' name="sex" value={0} onChange={this.handle} defaultChecked/>男
            <input type='radio' name="sex" value={1} onChange={this.handle}/>女
        </div>
      </div>
    )
  }
}
